<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>i18n 国际化学习演示</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header>
        <nav class="navbar">
            <div class="nav-brand">
                <h1 data-i18n="welcome">欢迎使用i18n国际化示例</h1>
            </div>
            <div class="nav-menu">
                <a href="#" data-i18n="home">首页</a>
                <a href="#" data-i18n="about">关于我们</a>
                <a href="#" data-i18n="contact">联系方式</a>

                <!-- 语言选择器 -->
                <div class="language-selector">
                    <label for="language-select" data-i18n="language">语言:</label>
                    <select id="language-select">
                        <option value="zh">中文</option>
                        <option value="en">English</option>
                        <option value="ja">日本語</option>
                    </select>
                </div>
            </div>
        </nav>
    </header>

    <!-- 主要内容区域 -->
    <main class="container">
        <!-- 介绍部分 -->
        <section class="intro-section">
            <h2 data-i18n="description">这是一个学习国际化的演示项目</h2>

            <!-- 动态内容示例 -->
            <div class="dynamic-content">
                <p id="hello-message" class="greeting">你好，小明！</p>
                <p id="current-time" class="time-display">当前时间：</p>
                <p id="item-count" class="item-counter">你有 5 个项目</p>
                <button id="refresh-btn" class="refresh-btn">🔄 刷新动态内容</button>
            </div>
        </section>

        <!-- 表单示例 -->
        <section class="form-section">
            <div class="form-container">
                <h3 data-i18n="form.title">用户登录</h3>
                <form class="demo-form">
                    <div class="form-group">
                        <label for="username" data-i18n="username">用户名:</label>
                        <input type="text" id="username" data-i18n-placeholder="username" placeholder="用户名">
                    </div>
                    <div class="form-group">
                        <label for="password" data-i18n="password">密码:</label>
                        <input type="password" id="password" data-i18n-placeholder="password" placeholder="密码">
                    </div>
                    <div class="form-actions">
                        <button type="submit" data-i18n="form.submit">提交</button>
                        <button type="reset" data-i18n="form.reset">重置</button>
                    </div>
                </form>
            </div>
        </section>

        <!-- 菜单示例 -->
        <section class="menu-section">
            <h3>导航菜单示例</h3>
            <ul class="menu-list">
                <li><a href="#" data-i18n="menu.products">产品</a></li>
                <li><a href="#" data-i18n="menu.services">服务</a></li>
                <li><a href="#" data-i18n="menu.support">支持</a></li>
            </ul>
        </section>

        <!-- 消息状态示例 -->
        <section class="messages-section">
            <h3>状态消息示例</h3>
            <div class="message-examples">
                <div class="message loading">
                    <span data-i18n="messages.loading">加载中...</span>
                </div>
                <div class="message success">
                    <span data-i18n="messages.success">操作成功</span>
                </div>
                <div class="message error">
                    <span data-i18n="messages.error">发生错误</span>
                </div>
                <div class="message no-data">
                    <span data-i18n="messages.no_data">暂无数据</span>
                </div>
            </div>
        </section>

        <!-- i18n概念说明 -->
        <section class="concepts-section">
            <h3>i18n 核心概念演示</h3>
            <div class="concepts-grid">
                <div class="concept-card">
                    <h4>1. 基础翻译</h4>
                    <p>使用 <code>data-i18n</code> 属性进行简单的文本翻译</p>
                    <div class="example">
                        <span data-i18n="welcome">欢迎使用i18n国际化示例</span>
                    </div>
                </div>

                <div class="concept-card">
                    <h4>2. 插值 (Interpolation)</h4>
                    <p>在翻译中插入动态值，如：{{name}}, {{time}}</p>
                    <div class="example" id="interpolation-example">
                        <!-- 由JavaScript动态填充 -->
                    </div>
                </div>

                <div class="concept-card">
                    <h4>3. 复数形式</h4>
                    <p>根据数量自动选择单数或复数形式</p>
                    <div class="example" id="plural-example">
                        <!-- 由JavaScript动态填充 -->
                    </div>
                </div>

                <div class="concept-card">
                    <h4>4. 嵌套翻译</h4>
                    <p>使用点号分隔的键来组织翻译结构</p>
                    <div class="example">
                        <span data-i18n="form.title">用户登录</span>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer>
        <p data-i18n="footer_text">版权所有 © 2024 i18n演示项目</p>
    </footer>

    <!-- 引入i18n配置 -->
    <script type="module" src="js/i18n.js"></script>
</body>
</html>